<template>
    <div class="customer" style="padding: 40px 20px 40px 0">

       <div style="width: 85%;" class="orderListFont">
		   <el-row style="">
		   	<el-row>
		   	    <el-col :span="24" style="margin-bottom: 20px;">
		   	        <span style="font-size: 18px;margin-left: 10px;">营销工具>优惠券管理</span>
		   	    </el-col>
		   	</el-row>
		      <div style="background-color: #FFFFFF;padding-top: 22px;margin-bottom: 20px;">
		   	   <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100px">
		   	           <el-form-item label-width="150px" label="按优惠券名称:">
		   	               <el-input v-model="formInline.voucherName" style="width: 150px;" :maxlength="50"></el-input>
		   	           </el-form-item>
		   	           <el-form-item label="按状态：">
		   	               <el-select v-model="formInline.voucherStat" style="width: 120px;" >
		   	                   <el-option label="全部" value=""></el-option>
		   	                   <el-option :label="item.text" :value="item.value" v-for="item in statList"></el-option>
		   	               </el-select>
		   	           </el-form-item>
		   	           <el-button type="primary" @click="fetchData(1)">查询</el-button>
		   	   		<el-button type="primary" @click="$router.push('/serve/combos_detail/0')">新增</el-button>
		   	       
		   	       </el-form>
		      </div>
		   </el-row>
		   
		   <el-table
		           :data="pageInfo.dtos"
		           v-loading="table_loading"
		           element-table_loading-text="加载中"
		           tooltip-effect="dark"
		           @sort-change='order'
		           style="width: 100%">
		       <el-table-column
		               type="index"
		               width="80"
		               label="序号">
		       </el-table-column>
		       <el-table-column
		               label="封面">
		               <template scope="scope">
		                   <img class="avatar" :src="scope.row.voucherCover" style="width: 55px;height: 55px;border-radius: 0;margin: 5px 0;">
		               </template>
		       </el-table-column>
		       <el-table-column
		               prop="voucherName"
		               label="优惠券名称"
					   show-overflow-tooltip>
		       </el-table-column>
		       <el-table-column
		               sortable='custom'
		               prop="voucher_Amt"
		               label="价格">
		               <template scope="scope">
		                   <span>{{ scope.row.voucherAmt }}</span>
		               </template>
		       </el-table-column>
		       <el-table-column
		               prop="voucherSunNum"
		               label="销量">
		       </el-table-column>
		       <el-table-column
		               prop="voucherNum"
		               label="库存">
		       </el-table-column>
		       <el-table-column
		               label="有效期"
					   show-overflow-tooltip>
		               <template scope="scope">
		                   <span>{{ scope.row.voucherStartTime }}至{{ scope.row.voucherEndTime }}</span>
		               </template>
		       </el-table-column>
		       <el-table-column
		               prop="normalState"
		               label="状态">
		               <template scope="scope">
		                   <span>{{statList[scope.row.voucherStat].text}}</span>
		               </template>
		       </el-table-column>
		       <el-table-column label="操作" width="220">
		           <template scope="scope">
		               <el-button type="primary" size="small" @click="edit(scope.row.voucherId)">编辑</el-button>
		               <el-button type="danger" size="small" @click="deleteCmbos(scope.row.voucherId)">删除</el-button>
					   <el-button type="danger" size="small"  v-if="scope.row.voucherStat==1"
		                          @click="handleDelete(scope.row,'禁用')">禁用
		               </el-button>
		               <el-button type="success" size="small" v-else
		                          @click="handleDelete(scope.row,'启用')">启用
		               </el-button> 
		           </template>
		       </el-table-column>
		   </el-table>
		   <div class="paginate">
		       <el-pagination
		               @current-change="handleCurrentChange"
		               :current-page="pageInfo.pageNum"
		               :page-size="pageInfo.pageSize"
		               layout="total, prev, pager, next, jumper"
		               :total="pageInfo.count">
		       </el-pagination>
		   </div>
	   </div>

    </div>

</template>
<style>
.orderListFont .el-form-item__label{
  	  text-align: right;
  	  font-size: 18px;
  	  font-weight: 500;
  }
</style>
<script>
    export default {
        data() {
            return {
                title: '用户列表',
                table_loading: false,
                formInline: {
                    pageNum:1,
                    sort:'VOUCHER_AMT',
                    desc:'DESC',
                    pageSize:10,
                    storeId:'',
                    voucherType:'1',
                    voucherName:'',
                    voucherStat:'',
                    storeId:''
                },
                pageInfo: {
                    pageNo: 1,
                    pageSize: 1,
                    count: 1,
                    dtos: []
                },
                formLabelWidth: '120px',
                statList:[{ text: '商家禁用', value: '0' },{ text: '已启用', value: '1' },{ text: '平台禁用', value: '2' }]

            }
        },
        created(){
       this.storeId=JSON.parse(sessionStorage.getItem('permission')).storeId
            this.formInline.storeId=this.storeId
            this.fetchData(this.pageInfo.pageNum);
        },
        activated() {
     
            //this.fetchList()
        },
        // watch:{
        //     'formInline.name'(val,oldVal) {
        //         //console.log(val)
        //         this.formInline[this.formInline.type] = this.formInline.name
        //     }
        // },
        methods: {
            fetchData (page = 1) {
                this.table_loading = true;
                this.pageInfo.pageNum = page
                this.formInline.pageNum = this.pageInfo.pageNum
                this.dataApi.ajax('selectPagePayStoreVoucher',this.formInline, res => {
                    this.table_loading = false;
                    if (res.responseType === 'S'){
						// console.log(res,'shuju')
                        this.pageInfo = res
                    }
                });


            },
            handleCurrentChange(val) {
                this.fetchData(val)
            },
            edit(id){
                this.$router.push('/serve/combos_detail/' + id)
            },
			deleteCmbos(id) {
				/**
				 * 方法说明
				 * author: liuchen
				 * description: 
				 * @param delete优惠券
				 * @return 
				 * @createTime: 2020-8-10 14:34:42
				 */
				let list = []
				list.push(id)
				this.$confirm('是否确认删除?', '提示', {
				      confirmButtonText: '确定',
				      cancelButtonText: '取消',
				      type: 'warning'
				    }).then(() => {
				      this.dataApi.ajax('deletePayStoreVoucher',{voucherIdList:list}, res => {
				            if (res.responseType === 'S') {
				                this.$message({
				                    type: 'success',
				                    message: '删除成功!'
				                });
				                this.fetchData(this.pageInfo.pageNum)
				            }
				        });
				    }).catch(() => {
				              
				    });
			},
            selectSort(){
                this.formInline.secondCode=''
                 this.dataApi.ajax('MallGoodClassifyControl/selectListOne',{classifyName:this.formInline.classifyCode}, res => {
                    if (res.responseType === 0) {
                        this.secondList = res.goodsClassifyPojos
                    }
                });
            },
            handleDelete(item,type){
                if (item.voucherStat==2) {
                    this.showMsg('此商品包含敏感信息,官方平台已下架,请联系平台客服,进行上架操作','warning')
                    return
                }
                var state=''
                state=item.voucherStat==1? 0:1
                this.$confirm('确认'+type+'?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }).then(() => {
                      this.dataApi.ajax('editPayStoreVoucher',{voucherStat:state,voucherId:item.voucherId}, res => {
                            if (res.responseType === 'S') {
                                this.$message({
                                    type: 'success',
                                    message: type+'成功!'
                                });
                                this.fetchData(this.pageInfo.pageNum)
                            }
                        });
                    }).catch(() => {
                              
                    });
            },
            order(column){
                if (!column.order) {
                    return;
                }
                if (column.order=='ascending') {
                     this.formInline.desc='ASC'
                }else{
                    this.formInline.desc='DESC'
                }
                this.formInline.sort=column.prop.toUpperCase()
                this.fetchData(this.pageInfo.pageNum)
            }

        }
    }
</script>
